<template>
    <div>
        <div v-if='status == 1'>
            <div style="margin-bottom: 20px;">
                <el-input v-model="query.title" placeholder="请输入标题" style="width: 200px;margin-right: 20px;"></el-input>
                <el-button type="primary" @click="select">查询</el-button>
            </div>
            <div v-if="store.state.user.type == 3">
                <el-button type="primary" @click="add(null)">新增</el-button>
                <el-button type="danger" @click="handDelete" :disabled="!ids.length">批量删除</el-button>

            </div>
            <el-table border :data="list" style="width: 100%;margin-top: 20px;"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="diqu" label="地区" />
                <el-table-column prop="xiehui" label="协会" />
                <el-table-column prop="time" label="时间" />
                <el-table-column prop="phone" label="图片">
                    <template #default="scope">
                        <img :src="scope.row.img" alt="" v-if="scope.row.img" style="width: 100px;height: 100px;">
                        <span v-else>暂无图片</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <!-- {{scope.row}} -->
                        <el-button type="text" @click="add(scope.row)">修改</el-button>
                        <el-button type="text" @click="neirong(scope.row)">内容</el-button>
                        <el-button type="text" @click="handDelete(scope.row)"
                            v-if="store.state.user.type == 3 && scope.row.id != store.state.user.id">删除</el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="address" label="Address" /> -->
            </el-table>
            <el-pagination v-show="total > 0" style="margin-top: 20px;" :currentPage="query.page"
                :page-sizes="[100, 200, 300, 400]" background layout="total,  prev, pager, next, jumper"
                :page-size="query.size" :total="total" @current-change="currentChange"></el-pagination>
        </div>
        <div v-else>
            <el-button type="primary" @click="addyi">新增一级</el-button>
            <el-button type="primary" @click="back">返回</el-button>
            <div v-for="(v,i) in xclist" :key="v.id">
                <div class='tyi'>

                    <div>{{ v.title }}
                        <img src="../../assets/shanchu.png" alt="" @click="shanchu(v,i)">
                    </div>
                    <el-button type="primary" @click="adder(v)" style="margin-left: 20px;">新增二级</el-button>
                </div>
                <div v-for="(vv,ii) in v.list" :key="v.id">
                    <div class="ter">
                        <div class="left"></div>
                        <div>{{ vv.title }}
                            <img src="../../assets/shanchu.png" alt="" @click="shanchu2(vv,ii,v.list)">
                        </div>
                    </div>
                    <div class="tsan"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        {{ vv.content }}
                    </div>
                </div>
            </div>

        </div>
        <el-dialog destroy-on-close v-model="dialogVisible2" title="新增一级" width="30%" :before-close="handleClose">
            <el-input v-model="title" placeholder="请输入标题" />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="submityi">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog destroy-on-close v-model="dialogVisible3" title="新增二级" width="30%" :before-close="handleClose">
            <el-input v-model="title" placeholder="请输入标题" />
            <el-input v-model="content" placeholder="请输入内容" type="textarea" style="margin-top: 20px;"/>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible3 = false">取消</el-button>
                    <el-button type="primary" @click="submiter">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog destroy-on-close v-model="dialogVisible" :title="type == 'add' ? '新增' : '修改'" width="30%"
            :before-close="handleClose">
            <el-form :model="form" :rules="rules" ref="formRef" :inline="false" size="default">
                <el-form-item prop="title" style="width: 100%;">
                    <el-input v-model="form.title" placeholder="请输入标题" style="width: 100%;">
                    </el-input>
                </el-form-item>
                <el-form-item prop="diqu" style="width: 100%;">
                    <el-input v-model="form.diqu" placeholder="请输入地区" style="width: 100%;">
                    </el-input>
                </el-form-item>
                <el-form-item prop="xiehui" style="width: 100%;">
                    <el-input v-model="form.xiehui" placeholder="请输入协会" style="width: 100%;">
                    </el-input>
                </el-form-item>

                <el-form-item prop='img'>
                    <el-upload action="/api/upload" :show-file-list="false" :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.img" :src="form.img" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import {
    onMounted,
    ref,
    reactive
} from 'vue'
import {
    getxuanchuan,xuanchuanitemadd,
    addxuanchuan,
    delxuanchuan,
    updatexuanchuan,delxuanchuanitem
} from "~/api/xm.js"
import {
    useStore
} from 'vuex'
import {
    ElMessage,
    ElMessageBox
} from 'element-plus'
import {
    Plus
} from '@element-plus/icons-vue'
const store = useStore()
const ids = ref([])
const list = ref([])
const xclist = ref([])
const total = ref(0)
const status = ref(1)
const type = ref('')
const title = ref('')
const content = ref('')
const id = ref('')
const currow=ref(null)
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const dialogVisible3 = ref(false)
const curyi=ref(null)
const query = ref({
    page: 1,
    size: 10,
    title: '',
})
const form = reactive({
    title: "",
    img: '',
    diqu: '',
    xiehui: ''
})
function back(){
    status.value = 1
    currow.value=null
    xclist.value=[]
}
function neirong(row) {
    currow.value=row
    status.value = 2
    xclist.value=row.list
}
function handleAvatarSuccess(e) {
    form.img = e.data
    console.log(e);
}
function shanchu(v,i){
    ElMessageBox.confirm(
    '是否删除'+v.title,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        delxuanchuanitem(v.id).then(res=>{
            xclist.value.splice(i,1)
            ElMessage({
        type: 'success',
        message: '删除成功',
      })
        })
     
    })
}
function shanchu2(v,i,list){
    ElMessageBox.confirm(
    '是否删除'+v.title,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        delxuanchuanitem(v.id).then(res=>{
            list.splice(i,1)
            ElMessage({
        type: 'success',
        message: '删除成功',
      })
        })
     
    })
}
function currentChange(e) {
    query.value.page = e
    select()
    console.log(e);
}
function addyi() {
    console.log(12);
    title.value = ''
    dialogVisible2.value = true
}
function adder(er) {
    console.log(12);

    title.value = ''
    curyi.value = er
    content.value = ''
    dialogVisible3.value = true
}
function submityi() {
    if (!title.value) {
        return    ElMessage({
            type: 'warning',
            message: '标题不能为空',
        })
    }
    let data={
        xid:currow.value.id,
        pid:0,
        title:title.value
    }
    xuanchuanitemadd(data).then(res=>{
        xclist.value.push(res.data)
        ElMessage({
            type: 'success',
            message: '新增成功',
        })
        dialogVisible2.value=false
    })
}
function submiter() {
    if (!title.value) {
     return   ElMessage({
            type: 'warning',
            message: '标题不能为空',
        })
    }
    if (!content.value) {
        return    ElMessage({
            type: 'warning',
            message: '内容不能为空',
        })
    }
    let data={
        xid:currow.value.id,
        pid:curyi.value.id,
        title:title.value,
        content:content.value,
    }
    xuanchuanitemadd(data).then(res=>{
        console.log(curyi.value);
        curyi.value.list.push(res.data)
        ElMessage({
            type: 'success',
            message: '新增成功',
        })
        dialogVisible3.value=false
    })
}
function handleSelectionChange(e) {

    ids.value = e.map(v => v.id)
    console.log(ids.value);
}
const validatePass = (rule, value, callback) => {
    console.log(value);
    if (value === '') {
        callback(new Error('手机号不能为空'))
    } else {
        let reg = /^1[3-9]\d{9}$/
        if (reg.test(value)) {
            callback()

        }
        callback(new Error('手机号格式不正确'))
    }
}
const rules = {
    title: [{
        required: true,
        message: '不能为空',
        trigger: 'change',
    }],
    diqu: [{
        required: true,
        message: '不能为空',
        trigger: 'change',
    }],
    img: [{
        required: true,
        message: '不能为空',
        trigger: 'change',
    }],
    xiehui: [{
        required: true,
        message: '不能为空',
        trigger: 'change',
    }],
}
onMounted(() => {
    select()
})

function handDelete(row) {
    let id = row.id ? row.id : ids.value.join(',')
    console.log(id);
    ElMessageBox.confirm(
        `是否删除id为${id}的数据?`,
        'Warning', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning',
    }
    )
        .then(() => {
            delxuanchuan(id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: 'Delete completed',
                    })
                    select()
                }
            })

        })

}

function add(e) {
    form.id = ''
    id.value = ''
    form.title = ''
    form.img = ''
    form.diqu = ''
    form.xiehui = ''
    type.value = "add"
    dialogVisible.value = true
    if (e && e.id) {
        type.value = "edit"
        id.value = e.id
        form.title = e.title
        form.img = e.img
        form.diqu = e.diqu
        form.xiehui = e.xiehui
    }
}

function select() {
    getxuanchuan(query.value).then(res => {
        total.value = res.data.total
        list.value = res.data.list
        console.log(res);
    })
}
const formRef = ref(null)
const rowId = ref('')

function submit() {
    formRef.value.validate((valid) => {
        if (valid) {
            if (type.value == "add") {
                addxuanchuan(form).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '新增成功',
                        })
                        dialogVisible.value = false
                        select()
                    }

                })
            } else {
                form.id = id.value
                updatexuanchuan(form).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        dialogVisible.value = false
                        select()
                    }
                })
            }


        }
    })
}

function deleteRow(row) {
    ElMessageBox.confirm(
        '是否要删除?',
        '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }
    )
        .then(() => {
            deletee(row.id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    select()
                }
            })

        })

}
</script>
<style scoped>
.tyi {
    align-items: center;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}
.tyi img{
    width: 20px;
    position: absolute;
    top: -10px;
    z-index: 99;
    right: -10px;
    height: 20px;
}
.tyi>div {
    display: inline-block;
    position: relative;
    background-color: rgb(38, 38, 173);
    padding: 7px 25px;
    color: white;
    font-weight: bold;
    font-size: 16px;
}
.ter>div:nth-child(2){
    position: relative;
}
.ter img{
    width: 20px;
    position: absolute;
    top: -10px;
    z-index: 99;
    right: -10px;
    height: 20px; 
}
.tsan {
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
    font-size: 16px;
    margin-bottom: 26px;
}

.ter {
    font-size: 16px;
    width: 80%;
    font-weight: bold;
    margin: 0 auto;
    position: relative;
    box-shadow: rgb(153, 153, 153) 0em 0.2em 0.2em;
    padding: 10px;
    padding-left: 25px;
    background-color: rgb(237, 251, 255);
    border-radius: 5px 0px 0px 5px;
    /* display: flex; */
}

.ter>.left {
    position: absolute;
    left: 0;
    border-radius: 5px 0px 0px 5px;
    top: 0;
    bottom: 0;
    width: 10px;
    background-color: rgb(38, 38, 173);
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>